<template>
  <div class="container" >
    <div class="nav" :style="{height: titleBarHeight + 'px',
    'padding-top':statusBarHeight+'px',
    'line-height':titleBarHeight+'px'}">{{text}}</div>
  </div>
</template>

<script>
export default {
  props: ["text"],
  data() {
    return {
      statusBarHeight:'',
      titleBarHeight:'',
      navBarHeight:''
    };
  },
  onLoad() {
    var self = this
    wx.getSystemInfo({
      success(system) {
        console.log(`system:`, system);
        self.statusBarHeight = system.statusBarHeight;

        let platformReg = /ios/i;
        if (platformReg.test(system.platform)) {
          self.titleBarHeight = 44;
        } else {
          self.titleBarHeight = 48;
        }

        self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
      }
    });
  }
};
</script>

<style>
.container{
  width: 100%;
  padding: 0;
}
.nav {
  width: 100%;
  height: 44px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  /* line-height: 44px; */
  background: url('https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/my_partner/nav.png') no-repeat;
  background-size: 100% 100%;
}
</style>
